import React, {Component} from 'react';
import { Layout, Menu, Icon } from 'antd';
import Head from './Home/Head';
import LeftMenu from './System/LeftMenu';
import Breadcrumb from './System/Breadcrumb';
import UserContent from './System/UserContent';
import RoleContent from './System/RoleContent';
import PermissionContent from './System/PermissionContent';
import ChannelContent from './System/ChannelContent';
import { connect } from 'dva';
import styles from './css/System.css';

const { Header, Content, Footer, Sider } = Layout;

class System extends Component {
	
	render() {
		let content
		switch (this.props.state.tab){
			case '用户':
				content = <UserContent />
				break;
			case '角色':
				content = <RoleContent />
				break;
			case '权限':
				content = <PermissionContent />
				break;
			case '通道':
				content = <ChannelContent />
				break;
		}
		
		return (
			<Layout className={styles.container}>
				<Head />
		    	<Content className={styles.body}>
			      	<Breadcrumb />
			      	<Layout className={styles.contentLayout}>
				        <Sider className={styles.sider}>
					    	<LeftMenu />
				        </Sider>
				        <Content className={styles.content}>
				        	{content}
				        </Content>
					</Layout>
				</Content>
			    <Footer className={styles.footer}>
					@user-server system
			    </Footer>
			</Layout>
		)
	}
	
	componentWillMount() {
		this.props.dispatch({type: 'system/init'});
	}
	
}

export default connect(state => ({
	state: {
		...state.system,
		loading: state.loading.models.system
	}
}))(System);